<template>
  <div class="text-red">
    {{message}}

    <div style="font-size:20px;">使用 img 标签</div>
    <div style="font-size:20px;">修改文本</div>
    <img src="../assets/image/avatar.jpg"
         alt="avatar"
         class="avatar" />

    <div>使用background</div>
    <div class="avatar bg-avatar"></div>

    <input type="text"
           placeholder="请输入内容 111">
  </div>
</template>

<script>
export default {
  name: 'UserIndex',
  data () {
    return {
      message: 'hello UserIndex'
    }
  }
}
</script>

<style lang="less">
@import '../assets/css/common.less';
.text-red {
  color: red;
  // display: flex;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  &.bg-avatar {
    background-image: url('../assets/image/avatar.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>